<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <!-- 在标签内 和标签名以一个空格分隔的叫做属性  => js 属性节点 -->
  <div id="box" class="one two three" title="123123" asd="asd" data-id="1"></div>
</body>
<script>
  var box = document.getElementById("box");


  // 获取和设置标签内的属性  => 属性节点
  // console.log(box.getAttribute("id"));
  // console.log(box.getAttribute("class"));
  // console.log(box.getAttribute("title"));
  // console.log(box.getAttribute("data-id"));
  // console.log(box.getAttribute("asd"));

  // box.setAttribute("id", "haha");

  // 元素节点的属性
  // 元素节点 => 本质 对象 => 存在很多修饰该元素的属性
  console.dir(box);

    // box.innerHTML
    // box.innerText
    // box.textContent
    // box.tagName
    // box.className
    // box.classList
    // box.id
    // box.title
    // box.style






</script>

</html>